<template>
  <view class="end flex flex-col justify-center">
    <NavigationBar navigation-title="完成课程" :go-back="goBack" />
    <image class="end-bg" src="https://app5.shuguostar.cn/imgs/images/answer/bg.png" />

    <view class="end-content flex flex-col">
      <image class="text-bg" src="https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250516/end_bg.png" />

      <view class="end-title flex flex-col">
        <text>恭喜你</text>
        <text>又读完一本书</text>
      </view>

      <view class="end-wrap flex-1">
        <view class="end-info flex items-center justify-between">
          <text class="label flex-1">
            阅读内容
          </text>
          <text class="value">
            {{ `《${detail?.bookName}》` }}
          </text>
        </view>
        <!-- <view class="end-info flex items-center justify-between">
          <text class="label flex-1">
            阅读时间
          </text>
          <text class="value">
            {{ `${detail?.startDate}至${detail?.endDate}` }}
          </text>
        </view> -->

        <view class="end-item item-top">
          <view class="item-title flex items-center">
            <image class="title-icon" src="https://cbandu.oss-cn-qingdao.aliyuncs.com/imgs/20250701/2.png" />
            <text class="title-name">
              共计阅读书
            </text>
          </view>

          <view class="item-content flex">
            <text class="content-num">
              {{ detail?.books && formatPrice(detail.books) }}
            </text>
            <text class="content-text">
              本
            </text>
          </view>
        </view>
        <view class="end-item item-bottom">
          <view class="item-title flex items-center">
            <image class="title-icon" src="https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250626/1.png" />
            <text class="title-name">
              答题正确率
            </text>
          </view>

          <view class="item-content flex">
            <text class="content-num">
              {{ detail?.successRate }}
            </text>
            <text class="content-text">
              %
            </text>
          </view>
        </view>

        <button open-type="share" hover-class="none" class="end-btn">
          分享
        </button>
      </view>
    </view>

    <view class="end-bottom flex justify-between">
      <view class="bottom-left flex flex-col">
        <!-- <text class="info1">
          阅读，赋予我奇妙的力量
        </text> -->
        <text class="info2">
          阅读，赋予我奇妙的力量
        </text>
        <text class="info3">
          长按识别二维码
        </text>
      </view>
      <view class="bottom-right flex">
        <text class="text">
          长按识别
        </text>
        <view class="qr-wrap">
          <image class="qr" :src="qrCodeUrl" mode="aspectFill" />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import NavigationBar from '@/components/navigation-bar/index.vue';
import { formatPrice } from '@/utils';
import { useUserStore } from '@/store';

interface Detail {
  bookName: string;
  startDate: string;
  endDate: string;
  books: string;
  fonts: string;
  successRate: number | string;
}

const detail = ref<Detail>({
  bookName: '',
  startDate: '',
  endDate: '',
  books: '',
  fonts: '',
  successRate: 0,
});

const goBack = () => {
  uni.navigateBack({ delta: 3 });
};

const userStore = useUserStore();
const qrCodeUrl = ref<string>(userStore.xcx_ewm);

onLoad((options: any) => {
  const { bookName, startDate, endDate, books, fonts, successRate } = options;
  detail.value = {
    bookName,
    startDate,
    endDate,
    books,
    fonts,
    successRate,
  };
});

// 分享
uni.showShareMenu({
  withShareTicket: true,
  menus: ['shareAppMessage', 'shareTimeline'],
});
onShareAppMessage(() => {
  return {
    title: userStore.share_txt,
    imageUrl: userStore.share_pic_url,
  };
});
</script>

<style lang="scss" scoped>
.end {
  position: relative;
  width: 100%;
  padding-top: 188rpx;
  min-height: 100%;
  background: #B7EC98;

  .end-bg {
    position: absolute;
    top: 100rpx;
    left: 36rpx;
    width: 666rpx;
    height: 124rpx;
  }

  .end-content {
    position: relative;
    width: 670rpx;
    height: 940rpx;
    padding: 66rpx 32rpx 32rpx 32rpx;
    margin: 78rpx 40rpx 308rpx 40rpx;

    .text-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 670rpx;
      height: 940rpx;
    }

    .end-title {
      position: relative;
      font-size: 36rpx;
      line-height: 50rpx;
      font-weight: 500;
      color: #fff;
      z-index: 1;
    }

    .end-wrap {
      position: relative;
      margin-top: 18rpx;
      width: 100%;
      height: 100%;
      padding: 32rpx;
      background: #fff;
      border-radius: 24rpx;
      z-index: 1;

      .end-info {
        padding-bottom: 16rpx;

        .label {
          font-size: 24rpx;
          line-height: 36rpx;
          color: #666;
        }

        .value {
          width: 310rpx;
          font-size: 24rpx;
          line-height: 36rpx;
          color: #333;
        }
      }

      .end-item {
        padding: 32rpx;

        .item-title {
          .title-icon {
            width: 48rpx;
            height: 48rpx;
          }

          .title-name {
            padding-left: 8rpx;
            line-height: 48rpx;
            font-size: 28rpx;
            font-weight: 500;
            color: #333;
          }
        }

        .item-content {
          padding-top: 12rpx;
          align-items: flex-end;

          .content-num {
            font-size: 48rpx;
            line-height: 68rpx;
            color: #333;
          }

          .content-text {
            padding-left: 8rpx;
            font-size: 28rpx;
            font-weight: 500;
            line-height: 64rpx;
            color: #333;
          }
        }
      }

      .item-top {
        margin-top: 24rpx;
      }

      .item-bottom {
        margin-top: 16rpx;
        margin-bottom: 40rpx;
      }

      .end-btn {
        width: 100%;
        font-size: 32rpx;
        line-height: 96rpx;
        color: #fff;
        text-align: center;
        background: linear-gradient( 90deg, #FFA029 0%, #FFCD29 100%);
        box-shadow: 0rpx -4rpx 20rpx 0px #FFB085;
        border-radius: 48rpx;
      }
    }
  }

  .end-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 750rpx;
    padding: 16rpx 40rpx;
    background: #fff;

    .bottom-left {
      .info1 {
        font-size: 28rpx;
        line-height: 40rpx;
        color: #4AAAF8;
      }

      .info2 {
        margin: 32rpx 0;
        padding: 0 16rpx;
        background: linear-gradient( 90deg, #F69576 0%, #FB634E 100%);
        border-radius: 24rpx;

        font-size: 28rpx;
        font-weight: 500;
        line-height: 48rpx;
        color: #fff;
      }

      .info3 {
        padding-top: 12rpx;
        font-size: 24rpx;
        line-height: 32rpx;
        color: #888888;
      }
    }

    .bottom-right {
      padding: 8rpx;
      background: linear-gradient( 180deg, #FFB196 0%, #FB634E 100%);
      border-radius: 16rpx;

      .text {
        padding: 16rpx 12rpx 16rpx 16rpx;
        width: 56rpx;
        font-size: 28rpx;
        line-height: 32rpx;
        color: #fff;
      }

      .qr-wrap {
        width: 160rpx;
        height: 160rpx;
        padding: 4rpx;
        border-radius: 8rpx;
        background: #fff;

        .qr {
          width: 100%;
          height: 100%;
          background: #CCCCCC;
          border-radius: 8rpx;
        }
      }
    }
  }
}
</style>
